<template>
  <div class="jobs-page">
    <el-card class="jobs-card">
      <div class="jobs-header">
        <h2><i class="el-icon-suitcase"></i> 岗位查看与申请</h2>
      </div>
      <el-form :inline="true" :model="filters" class="filter-form" @submit.prevent>
        <el-form-item label="岗位名称">
          <el-input v-model="filters.name" placeholder="输入岗位名称" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="工作地点">
          <el-input v-model="filters.location" placeholder="输入工作地点" clearable style="width: 180px;" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filters.status" placeholder="全部" clearable style="width: 140px;">
            <el-option label="可申请" :value="0" />
            <el-option label="不可申请" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button @click="resetFilters">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="jobs-table-wrapper">
        <el-table :data="tableData.records" style="width: 100%;" height="100%" border stripe>
          <el-table-column prop="name" label="岗位名称" min-width="120" />
          <el-table-column prop="description" label="工作内容" min-width="180" show-overflow-tooltip />
          <el-table-column prop="location" label="工作地点" min-width="100" />
          <el-table-column prop="salary" label="薪资(元/小时)" min-width="100" />
          <el-table-column prop="time" label="工作时间" min-width="120" />
          <el-table-column prop="status" label="状态" min-width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 0 ? 'success' : 'info'">
                {{ row.status === 0 ? '可申请' : '不可申请' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button v-if="row.status === 0" type="primary" size="small" @click="openApplyDialog(row)">
                <i class="el-icon-edit"></i> 申请
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, jumper, ->, total"
          :total="tableData.total"
          :page-size="filters.size"
          :current-page="filters.page"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
    <el-dialog v-model="applyDialogVisible" title="岗位申请" width="420px" :close-on-click-modal="false">
      <el-form :model="applyForm" :rules="applyRules" ref="applyFormRef" label-width="90px" class="apply-form">
        <el-form-item label="申请原因" prop="reason">
          <el-input type="textarea" v-model="applyForm.reason" placeholder="请输入申请原因" maxlength="200" show-word-limit />
        </el-form-item>
        <el-form-item label="意向时间" prop="schedule">
          <el-input v-model="applyForm.schedule" placeholder="如：每周一三下午" maxlength="50" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="applyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitApply">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const filters = ref({
  name: '',
  location: '',
  status: null,
  page: 1,
  size: 8
})

const tableData = ref({
  records: [],
  total: 0
})

const fetchData = async () => {
  const res = await request.get('/api/position/list', { params: filters.value })
  if (res.code === 0) {
    tableData.value = {
      records: res.data.records,
      total: res.data.total
    }
    filters.value.page = res.data.current
    filters.value.size = res.data.size
  }
}

const handlePageChange = (val) => {
  filters.value.page = val
  fetchData()
}

const resetFilters = () => {
  filters.value = { name: '', location: '', status: null, page: 1, size: 8 }
  fetchData()
}

// 申请弹窗相关
const applyDialogVisible = ref(false)
const applyForm = ref({
  reason: '',
  schedule: ''
})
const applyRules = {
  reason: [
    { required: true, message: '请输入申请原因', trigger: 'blur' },
    { min: 2, max: 200, message: '2-200字', trigger: 'blur' }
  ],
  schedule: [
    { required: true, message: '请输入意向时间', trigger: 'blur' },
    { max: 50, message: '不超过50字', trigger: 'blur' }
  ]
}
const applyFormRef = ref()
let currentPositionId = null

const openApplyDialog = (row) => {
  currentPositionId = row.id
  applyForm.value = { reason: '', schedule: '' }
  applyDialogVisible.value = true
}

const submitApply = () => {
  applyFormRef.value.validate(async (valid) => {
    if (!valid) return
    try {
      const res = await request.post('/api/application/apply', {
        positionId: currentPositionId,
        reason: applyForm.value.reason,
        schedule: applyForm.value.schedule
      })
      if (res.code === 0) {
        ElMessage.success('申请成功！')
        applyDialogVisible.value = false
        fetchData()
      } else {
        ElMessage.error(res.message || res.msg || '申请失败')
      }
    } catch (e) {
      ElMessage.error('网络错误，申请失败')
    }
  })
}

fetchData()
</script>

<style scoped>
.jobs-page {
  min-height: 100vh;
  background: #fff;
  padding: 0;
}
.jobs-card {
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: #fff;
  padding: 0 0 12px 0;
}
.jobs-header {
  margin-bottom: 8px;
  padding: 20px 32px 0 32px;
}
.jobs-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.jobs-desc {
  color: #888;
  font-size: 14px;
  margin: 0 0 4px 2px;
}
.filter-form {
  margin-bottom: 12px;
  padding: 12px 24px 0 24px;
  background-color: #f8f9fa;
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.02);
}
.jobs-table-wrapper {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 2px;
  padding: 0 16px;
}
.el-table {
  border-radius: 6px;
  background: #fff;
  box-shadow: none;
}
.el-table th {
  background: #e9eef6;
  color: #222;
  font-weight: 700;
  font-size: 15px;
}
.el-table .el-button {
  border-radius: 6px;
  font-weight: 500;
  box-shadow: none;
  transition: background 0.2s;
}
.el-table .el-button--primary {
  background: linear-gradient(90deg, #5cb6ff 0%, #409eff 100%);
  border: none;
}
.el-table .el-button[disabled] {
  background: #f0f0f0;
  color: #aaa;
}
.el-tag.el-tag--success {
  background: #e6f7ec;
  color: #52c41a;
  border: none;
}
.el-tag.el-tag--info {
  background: #f0f1f3;
  color: #909399;
  border: none;
}
.pagination-wrapper {
  margin-top: 12px;
  text-align: right;
  padding-right: 24px;
}
.apply-form {
  padding-top: 8px;
}
</style> 